<template>
  <div class="wrap">
  		<div class="app-header"><header-v></header-v></div>
  		
  		<div class="app-content">
  			<div class="Pro-content">
  				<div class="titles">
  					<a href="javascript:;" class="title" @click="shake">参展范围</a>
  				</div>
  				<div class="carousel2">
				    <swiper auto loop :interval='3000' dots-position='center'>
				    	<div v-for="item in carousel">
				      	<swiper-item><img :src="item.src" /><p><strong>{{ item.title }}</strong> <br /> {{ item.desc }}</p></swiper-item>
				      </div>
				    </swiper>
					</div>
  			</div>
  			
  			<div class="Pro-content2">
  				<div class="icon">
  						<img :src="item.src"  v-for="item in Icon" @click="shake" alt="Icon" />
  				</div>
  				<div class="titles">
  					<a href="javascript:;" class="title" @click="shake">收费详情</a>
  				</div>
  				<div class="con" v-for="item in company">
  					<div class="head2">
  						<span class="title2" >{{ item.title }}</span>
  						<div class="circle">
  							<svg style="width: 40%; margin-top: -0.08rem;" xmlns="http://www.w3.org/2000/svg" class="wqd-svg" enable-background="new 0 0 1792 1792" viewBox="-101.68 -71.68 1935.2 1935.2" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><circle clip-rule="evenodd" fill="#fff" fill-rule="evenodd" stroke-linecap="square" stroke-width="71.68" cx="895.914" cy="896" r="895"></circle></svg>
  							<div class="num">{{ item.money }}<span>/个</span></div>
  						</div>
  					</div>
  					<div class="count">
  						<p>{{ item.con1_top }} <br />{{ item.con1_btm }}</p>
  						<p>{{ item.con2_top }} <br />{{ item.con2_btm }}</p>
  						<p>{{ item.con3_top }} <br />{{ item.con3_btm }}</p>
  						<a :href="item.url" class="btn">{{ item.btn }}</a>
  					</div>
  				</div>
  				<div class="con con2" v-for="item in company2">
  					<div class="head2">
  						<span class="title2">{{ item.title }}</span>
  						<div class="circle">
  							<svg style="width: 40%; margin-top: -0.08rem;" xmlns="http://www.w3.org/2000/svg" class="wqd-svg" enable-background="new 0 0 1792 1792" viewBox="-101.68 -71.68 1935.2 1935.2" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><circle clip-rule="evenodd" fill="#fff" fill-rule="evenodd" stroke-linecap="square" stroke-width="71.68" cx="895.914" cy="896" r="895"></circle></svg>
  							<div class="num">{{ item.money }}<span>/个</span></div>
  						</div>
  					</div>
  					<div class="count">
  						<p>{{ item.con1_top }} <br />{{ item.con1_btm }}</p>
  						<p>{{ item.con2_top }} <br />{{ item.con2_btm }}</p>
  						<p>{{ item.con3_top }} <br />{{ item.con3_btm }}</p>
  						<a :href="item.url" class="btn">{{ item.btn }}</a>
  					</div>
  				</div>
  				<div class="con con3" v-for="item in company3">
  					<div class="head2">
  						<span class="title2">{{ item.title }}</span>
  						<div class="circle">
  							<svg style="width: 40%; margin-top: -0.08rem;" xmlns="http://www.w3.org/2000/svg" class="wqd-svg" enable-background="new 0 0 1792 1792" viewBox="-101.68 -71.68 1935.2 1935.2" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><circle clip-rule="evenodd" fill="#fff" fill-rule="evenodd" stroke-linecap="square" stroke-width="71.68" cx="895.914" cy="896" r="895"></circle></svg>
  							<div class="num">{{ item.money }}<span>/个</span></div>
  						</div>
  					</div>
  					<div class="count">
  						<p>{{ item.con1_top }} <br />{{ item.con1_btm }}</p>
  						<p>{{ item.con2_top }} <br />{{ item.con2_btm }}</p>
  						<p>{{ item.con3_top }} <br />{{ item.con3_btm }}</p>
  						<a :href="item.url" class="btn">{{ item.btn }}</a>
  					</div>
  				</div>
  			</div>
  			
  			<div class="Pro-content3">
	  				<div class="titles">
	  					<a href="javascrpt:;" class="title" @click="shake">展会现场</a>
	  				</div>
	  				<div class="con" v-for="item in spot">
	  					<p>{{ item.topTxt }}</p>
	  					<img :src="item.src1" @click="zoom"></img>
	  					<img :src="item.src2" @click="zoom"></img>
	  					<img :src="item.src3" @click="zoom"></img>
	  					<p>{{ item.btmTxt }}</p>
	  				</div>
  			</div>
  			
  			<div class="Pro-content4">
					<div class="head3">
						<div class="title2">现场图集<i></i></div>
						<div class="tab">
							<a href="javascript:;" :class="{active : showTab3}" title="图集一" @click="showTab">图集一</a>
							<a href="javascript:;" :class="{active : showTab2}" title="图集二" @click="showTab">图集二</a>
							<a href="javascript:;" :class="{active : showTab1}" title="图集三" @click="showTab">图集三</a>
						</div>
					</div>
					<transition name="vux-pop-in">
						<div class="pic" v-if="showTab1" v-for="item in atlas">
							<img :src="item.src" alt="" @click="zoom" class="big" />
							<div>
	  							<img :src="item.src2" @click="zoom" alt="" />
	  							<img :src="item.src3" @click="zoom" alt="" />
							</div>
						</div>
					</transition>
					<transition name="vux-pop-in">
						<div class="pic pic2" v-if="showTab2" v-for="item in atlas_2">
	  					<img :src="item.src" class="big" @click="zoom" alt="" />
							<div>
	  							<img :src="item.src2" @click="zoom"  alt="" />
	  							<img :src="item.src3" @click="zoom" alt="" />
							</div>
						</div>
					</transition>
					<transition name="vux-pop-in">
						<div class="pic pic3" v-if="showTab3" >
							<img v-for="item in atlas_3" @click="zoom" :src="item.src" alt="" />
						</div>
					</transition>
  			</div>
  		</div>
  		
  		<div class="app-footer"><footer-v></footer-v></div>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { Swiper, SwiperItem, Tab, TabItem } from 'vux'
import atlas_1 from '../../assets/product_pic_4.jpg'
import atlas_2 from '../../assets/product_pic_5.jpg'
import atlas_3 from '../../assets/product_pic_6.jpg'
import atlas_4 from '../../assets/product_pic_7.jpg'
import atlas_5 from '../../assets/product_pic_8.jpg'
import atlas_6 from '../../assets/product_pic_9.jpg'
import atlas_7 from '../../assets/product_pic_10.jpg'
import atlas_8 from '../../assets/product_pic_11.jpg'
import atlas_9 from '../../assets/product_pic_12.jpg'
import atlas_10 from '../../assets/product_pic_13.jpg'
import atlas_11 from '../../assets/product_pic_14.jpg'
import atlas_12 from '../../assets/product_pic_15.jpg'

import carousel_1 from '../../assets/product_car_03.jpg'
import carousel_2 from '../../assets/product_car_06.jpg'
import carousel_3 from '../../assets/product_car_04.jpg'
import carousel_4 from '../../assets/product_car_05.jpg'
import carousel_5 from '../../assets/product_car_02.jpg'
import carousel_6 from '../../assets/product_car_01.jpg'

import spot_1 from '../../assets/product_pic_1.jpg'
import spot_2 from '../../assets/product_pic_2.jpg'
import spot_3 from '../../assets/product_pic_3.jpg'

import Icon_left from '../../assets/product_icon_1.gif'
import Icon_right from '../../assets/product_icon_2.gif'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	Swiper, SwiperItem, Tab, TabItem
  },
  data () {
    return {
    	carousel : [
    		{
    			src : carousel_1,
    			title : '有机植物油展区',
    			desc : '橄榄油、山茶油、茶油、核桃油、玉米胚芽油、葵花籽油、米糠油、花生油、亚麻油及其它高端营养油等；'
    		},
    		{
    			src : carousel_2,
    			title : '有机葡萄酒展区',
    			desc : '红葡萄酒、白葡萄酒、香槟、雪莉酒、冰酒、白兰地、威士忌等;'
    		},
    		{
    			src : carousel_3,
    			title : '有机或有机转换食品',
    			desc : '有机庄园、杂粮、大米、水果、蔬菜，有机茶、有机食用油、面粉、肉类、奶制品、蛋品、水产品、冷冻食品、便利食品、农副土特产品等；'
    		},
    		{
    			src : carousel_4,
    			title : '有机食品展区',
    			desc : '有机大米、富硒大米，有机茶叶、有机富硒杂粮、绿色蜂产品、绿色有机农产品等'
    		},
    		{
    			src : carousel_5,
    			title : '新资源食品展区',
    			desc : '玛咖及玛咖制品、铁皮石斛、辣木、营养健康食品、养生食品等'
    		},
    		{
    			src : carousel_6,
    			title : '相关产品和服务行业、机械设备展区',
    			desc : '各类生产加工设备、生物发酵技术、金属探测器、包装机械、喷码设备、包装材料及相关学会、协会和服务认证机构'
    		}
    	],
    	Icon : [
    		{src : Icon_left},
    		{src : Icon_right}
    	],
			company : [
				{
					title : '内资企业',
					money : '￥13800',
					con1_top : '标准展位',
					con1_btm : '3m×3m　RMB13800/个',
					con2_top : '形象展位',
					con2_btm : '3m×3m　RMB16800/个',
					con3_top : '特装展位',
					con3_btm : '36㎡起租RMB1300/平米',
					btn : '报名',
					url : '/#/register'
				}
			],
			company2 : [
				{
					title : '合资企业',
					money : '￥16800',
					con1_top : '标准展位',
					con1_btm : '3m×3m　RMB16800/个',
					con2_top : '形象展位',
					con2_btm : '3m×3m　RMB18800/个',
					con3_top : '特装展位',
					con3_btm : '36㎡起租RMB1600/平米',
					btn : '报名',
					url : '/#/register'
				}
			],
			company3 : [
				{
					title : '外资企业',
					money : '￥18800',
					con1_top : '标准展位',
					con1_btm : '3m×3m　RMB18800/个',
					con2_top : '形象展位',
					con2_btm : '3m×3m　RMB20800/个',
					con3_top : '特装展位',
					con3_btm : '36㎡起租RMB1800/平米',
					btn : '报名',
					url : '/#/register'
				}
			],
			spot : [
				{
					topTxt : '2016上海某某有机食品展览会 ——有机、有爱、有健康',
					src1 : spot_1,
					src2 : spot_2,
					src3 : spot_3,
					btmTxt : '2016上海某某食品及有机食品展览会 ——10年风雨兼程'
				},
			],
			atlas : [
				{
					src : atlas_1,
					src2 : atlas_2,
					src3 : atlas_3
				}
			],
			atlas_2 : [
				{
					src : atlas_4,
					src2 : atlas_5,
					src3 : atlas_6
				}
			],
			atlas_3 : [
				{src : atlas_7},
				{src : atlas_8},
				{src : atlas_9},
				{src : atlas_10},
				{src : atlas_11},
				{src : atlas_12}
			],
			showTab1 : true,
			showTab2 : false,
			showTab3 : false
    }
  },
  methods : {
  	showTab (ev){
  		if(ev.target.title == '图集三'){
				this.showTab1 = true,
				this.showTab2 = false,
				this.showTab3 = false
			}else if(ev.target.title == '图集二'){
				this.showTab2 = true,
	  		this.showTab1 = false,
	  		this.showTab3 = false
			}else{
				this.showTab3 = true,
	  		this.showTab2 = false,
	  		this.showTab1 = false
			}
  	},
  	shake (ev){
  		ev.target.classList.add('shake');
			setTimeout(function (){
				ev.target.classList.remove('shake');
			},950)
  	},
		zoom (ev){	
			
			ev.target.classList.add('active');
			
			setTimeout(function (){	
				ev.target.classList.remove('active');
			},600);
			
		}
  }
}
</script>


<style type="text/css">
	/* Product.style */
	
	.carousel2 .vux-swiper-item img{
		width: 100%; height: 2.5rem;
	}
	.carousel2 .vux-swiper-item{
		height: 0 !important;
	}
	.carousel2 .vux-swiper-item p{
		display: block;
	}
	.carousel2 .vux-swiper{
		height: 4.2rem !important;
	}
	.Pro-content{
		padding: 0 0.18rem; background: #f0f2f7;
	}
	.Pro-content .carousel2 img{
		border-radius: 0.1rem; width:2.75rem; height: 2.56rem;
	}
	.Pro-content .carousel2{
		text-align: center;	
	}
	.Pro-content .carousel2 p{
		font-size: 0.16rem !important;
	}
	.Pro-content .vux-indicator a{
		margin-left: 0.06rem; 
	}
	.Pro-content .vux-indicator .vux-icon-dot{
		width: 0.08rem !important; height: 0.08rem !important; border-radius: 50% !important; border:0.02rem solid #aaa !important; background: #aaa !important; 
	}
	.Pro-content .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .Pro-content .vux-slider .vux-indicator-right > a > .vux-icon-dot.active{
		background-color: #fff !important; border-color: #25bce9 !important;
	}
	.Pro-content .title,.Pro-content3 .title,.Pro-content2 .title{
		width:1rem; height: 0.4rem; display: block; border: 0.02rem solid #3d9be9; color: #3d9be9; border-radius: 0.05rem; font-size: 0.2rem; text-align: center; line-height: 0.4rem; padding: 0 0.02rem; background:#fff; 
	}
	.Pro-content .titles,.Pro-content3 .titles,.Pro-content2 .titles{
		text-align: center; padding: 0.15rem 0;
	}
	.Pro-content .titles a,.Pro-content3 .titles a,.Pro-content2 .titles a{
		 margin: 0 auto;
	}

	
	.Pro-content .shake,.Pro-content2 .shake,.Pro-content3 .shake{
		-webkit-animation: shake 900ms linear; animation: shake 900ms linear;
	}
	.Pro-content3 .active, .Pro-content4 .active{
		-webkit-animation: zoom 0.5s;animation: zoom 0.5s;
	}
	
	.Pro-content2{
		background:#f0f2f7; padding: 0 0.18rem; 
	}
	.Pro-content2 .icon{
		padding-top: 0.2rem;
	}
	.Pro-content2 .icon img{
		width: 0.8rem; height: 0.8rem;
	}
	.Pro-content2 .icon img:nth-of-type(2){
		float: right;
	}
	.Pro-content2 .con{
		width:100%; overflow: hidden; padding-top: 0.3rem;
	}
	.Pro-content2 .head2{
		width:100%; height: 1.4rem;  background-color: #3498db; text-align: center;
	}
	.Pro-content2 .head2 .title2{
		font-size: 0.2rem; padding: 0.3rem 0; display: block; color: #fff;
	}
	.Pro-content2 .head2 .circle{
		position: relative;
	}
	.Pro-content2 .head2 .num{
		font-weight: bold; margin: 0 auto; color: #000; position: absolute; top: 20%; left: 40%;
	}
	.Pro-content2 .head2 span{
		display: block; font-weight: normal; color: #A9A9A9;
	}
	.Pro-content2 .con .count{
		background: #fff; width:100%; overflow: hidden;
 	}
	.Pro-content2 .con .count{
		text-align: center; padding-top: 0.55rem; line-height: 0.3rem;
	}
	.Pro-content2 .count p{
		margin-bottom: 0.24rem;
	}
	.Pro-content2 .count .btn{
		background: #af321f; color: #fff; width: 30%; padding: 0.05rem 0.1rem; display: block; border-radius: 0.04rem; font-size: 0.14rem;	margin: 0.35rem auto; text-align: center;
	}
	.Pro-content2 .count .btn:hover{
		background: #af321f;
	}
	.Pro-content2 .con2 .head2{
		background: #9b59b6;
	}
	.Pro-content2 .con2 .btn,.Pro-content2 .con3 .btn{
		background: #f54f36;
	}
	.Pro-content2 .con3{
		padding-bottom: 0.3rem;
	}
	.Pro-content2 .con3 .head2{
		background: #f0ad4e;
	}
	.Pro-content3 .titles{
		margin: 0.2rem auto;
	}
	
	.Pro-content3 {
		background: url('../../assets/con_bg.png') center center no-repeat; background-size: 100% 100%; width:100%; overflow: hidden;
	}
	.Pro-content3 .con p{
		width:2.2rem; height: 0.56rem;margin:0.15rem auto; color:#afa7a2; font-size: 0.16rem; text-align: center;
	}
	.Pro-content3 .con p:nth-of-type(2){
		width:2.7rem; margin: 0.2rem auto; text-align: center;
	}
	.Pro-content3 .con img:nth-of-type(1){
		width: 2.5rem !important; height: 1.8rem !important; margin-top: 0.15rem; -webkit-transform:rotateZ(-13.90428575679395deg);transform:rotateZ(-13.90428575679395deg);
	}
	.Pro-content3 .con img:nth-of-type(2){
		width: 2.55rem; height: 1.86rem; -webkit-transform:rotateZ(16.046514468049104deg);transform:rotateZ(16.046514468049104deg); margin-left: 0.6rem;
	}
	.Pro-content3 .con img:nth-of-type(3){
		width: 2.6rem; height: 1.95rem;-webkit-transform:rotateZ(-19.372994699200813deg);transform:rotateZ(-19.372994699200813deg); margin-left: 0.15rem; margin-bottom: 0.4rem;
	}
	
	.Pro-content4{
		padding: 0.15rem 0.12rem; overflow: hidden; height: 4.33rem;
	}
	.Pro-content4 .title2{
		font-size: 0.18rem; line-height: 0.3rem; text-align: center;
	}
	.Pro-content4 i{
		display: block; width: 0.4rem; height: 0.03rem; background: #907FB5; margin: 0.1rem auto; 
	}
	.Pro-content4 .tab{
		width:100%; overflow: hidden;  padding-top: 0.1rem;
	}
	.Pro-content4 .tab a{
		width: 0.91rem; height: 0.27rem; background: #fff; border: 0.01rem solid #a7a7a7; color: #777a77; display: block; float: left; text-align: center; line-height: 0.27rem; border-radius: 0.2rem; margin-bottom: 0.25rem;
	}
	.Pro-content4 .tab a:nth-of-type(2){
		margin-left: 0.08rem;
	}
	.Pro-content4 .tab a:nth-of-type(3){
		margin-left: 0.08rem;
	}
	.Pro-content4 .tab .active{
		color: #Fff; background-color: #907fb5;
	}
	.Pro-content4 .pic .big{
		width: 2.90rem; height: 2.12rem; margin-left: 0.025rem;
	}
	.Pro-content4 .pic div{
		width:100%; margin-top:0.12rem;
	}
	.Pro-content4 .pic div img{
		width: 1.38rem; height:0.9rem; margin-left: 0.025rem;
	}
	.Pro-content4 .pic div img:nth-of-type(2){
		margin-left: 0.1rem;
	}
	.Pro-content4 .pic3 img{
		width:45%; float: left; margin-left: 0.08rem; margin-bottom: 0.08rem;
	}
	.Pro-content4 .pic3 img:nth-of-type(2n){
		margin-left: 0.1rem;
	}
	

	
</style>